import React from 'react'
import Paper from '@material-ui/core/Paper'
import { makeStyles } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles((theme) => ({
  paper: {
    backgroundColor: theme.palette.grey[300],
    marginTop: theme.spacing(5),
    padding: theme.spacing(2),
    color: theme.palette.grey[700],
    position: "relative",
    zIndex: theme.zIndex.drawer - 1
  }
}))

function FootBar(props) {
  const classes = useStyles();
  return (
    <Paper classes={{ root: classes.paper }}>
      <Typography align="center" variant="caption" variantMapping={{caption:"p"}}>
        {props.description}
      </Typography>
      <Typography align="center" variant="caption" variantMapping={{caption:"p"}}>
        {props.info}
      </Typography>
    </Paper>
  )
}

export default FootBar;